<template>
	<div class="system-privilege-container">
		<div class="system-privilege-btn">
			<el-button size="mini" type="primary" @click="addFormVisible = true">新建</el-button>
		</div>
		<el-table
      :data="tableData"
      style="width: 100%;margin-bottom: 20px;"
      row-key="id"
      border
      default-expand-all
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}"
    >
      <el-table-column prop="category" label="类别" >
      </el-table-column>
      <el-table-column prop="name" label="名称">
      </el-table-column>
      <el-table-column prop="address" label="编码"> </el-table-column>
      <el-table-column prop="save" label="系统保留"> </el-table-column>
			<el-table-column label="" width="330">
				<template #default="scope">
          <el-button icon="el-icon-back" circle ></el-button>
          <el-button icon="el-icon-right" circle ></el-button>
          <el-button icon="el-icon-delete" circle ></el-button>
          <el-button icon="el-icon-top" circle ></el-button>
          <el-button icon="el-icon-bottom" circle ></el-button>
          <el-button icon="el-icon-edit-outline" circle @click="amdFormVisible = true"></el-button>
					<el-button icon="el-icon-copy-document" circle @click="onDetail(scope.row)"></el-button>
				</template>
			</el-table-column>
    </el-table>
		<el-dialog
			:title="dialogTitle"
			v-model="dialogVisible"
			width="50%"
			:before-close="handleClose"
		>
			<el-table :data="dialogData" style="width: 100%">
        <el-table-column prop="name" label="角色" width="180" />
        <el-table-column prop="describe" label="描述"  />
        <el-table-column prop="" label="操作" width="180" fixed="right">
          <template #default="scope">
            <el-button type="danger" @click="onDialog(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
		</el-dialog>
		<el-dialog
			title="添加权限"
			v-model="addFormVisible"
			width="50%"
			:before-close="handleClose"
			center
		>
			<el-form ref="Form" :model="addForm" label-width="80px" class="system-privilege-addForm" label-position="left">
        <el-form-item label="编码:" class="privilege-input">
          <el-input v-model="addForm.name" ></el-input>
        </el-form-item>
				<el-form-item label="描述:" class="privilege-input">
          <el-input v-model="addForm.describe" ></el-input>
        </el-form-item>
				<el-form-item label="层级">
          <el-select v-model="addForm.tier">
            <el-option label="大类" value="大类"></el-option>
            <el-option label="小类" value="小类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFormVisible = false">立即创建</el-button>
          <el-button @click="addFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
		</el-dialog>
		<el-dialog
			title="修改"
			v-model="amdFormVisible"
			width="30%"
			:before-close="handleClose"
			center
		>
			<el-form ref="Form" :model="amdForm" label-width="80px" class="system-privilege-amdForm" label-position="left">
        <el-form-item label="编码:" class="privilege-input">
          <el-input v-model="amdForm.name" ></el-input>
        </el-form-item>
				<el-form-item label="描述:" class="privilege-input">
          <el-input v-model="amdForm.describe" ></el-input>
        </el-form-item>
				<el-form-item label="层级">
          <el-select v-model="amdForm.tier">
            <el-option label="大类" value="大类"></el-option>
            <el-option label="小类" value="小类"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="amdFormVisible = false">立即创建</el-button>
          <el-button @click="amdFormVisible = false">取消</el-button>
        </el-form-item>
      </el-form>
		</el-dialog>
	</div>
</template>

<script>
import { toRefs, reactive, onMounted } from 'vue';
export default {
	name: 'systemPrivilege',
	setup() {
		const state = reactive({
			tableData: [
				{
					id: 1,
					category: '通用权限',
					name: '',
					address: 'ty',
					save: '否',
					children: [
						{
							id: 1-1,
							category: '',
							name: '发起流程',
							address: 'ty',
							save: '否',
						},
						{
							id: 1-2,
							category: '',
							name: '短信发送',
							address: 'ty',
							save: '否',
						},
						{
							id: 1-3,
							category: '',
							name: '工作计划',
							address: 'ty',
							save: '否',
						},
						{
							id: 1-4,
							category: '',
							name: '发送内部消息',
							address: 'ty',
							save: '否',
						},
						{
							id: 1-5,
							category: '',
							name: '共享日程',
							address: 'ty',
							save: '否',
						},
					],
				},
				{
					id: 2,
					category: '项目管理',
					name: '',
					address: 'ty',
					save: '否',
					children: [
						{
							id: 2-11,
							category: '',
							name: '发起流程',
							address: 'ty',
							save: '否',
						},
						{
							id: 2-2,
							category: '',
							name: '短信发送',
							address: 'ty',
							save: '否',
						},
						{
							id: 2-3,
							category: '',
							name: '工作计划',
							address: 'ty',
							save: '否',
						},
						{
							id: 2-4,
							category: '',
							name: '发送内部消息',
							address: 'ty',
							save: '否',
						},
						{
							id: 2-5,
							category: '',
							name: '共享日程',
							address: 'ty',
							save: '否',
						},
					],
				},
			],
      dialogData:[
        {
          describe: '总经理',
          name: '14156306787511304481',
        },
        {
          describe: '总经理',
          name: '14156306787511304481',
        },
        {
          describe: '总经理',
          name: '14156306787511304481',
        },
        {
          describe: '总经理',
          name: '14156306787511304481',
        },
      ],
			dialogVisible: false,
			addFormVisible: false,
			amdFormVisible: false,
      dialogTitle:'',
			addForm:{
        name:'',
        describe:'',
        tier:'大类',
      },
			amdForm:{
        name:'',
        describe:'',
        tier:'大类',
      },
		});
		
		// 页面加载时
		onMounted(() => {
		});
		return {
			...toRefs(state),
		};
	},
	methods:{
		onDetail(val){
			this.dialogVisible = true
      this.dialogTitle = '权限-'+ val.category
			console.log(val);
		},
    onDialog(val){
      console.log(val);
    }
		
	}
};
</script>

<style scoped lang="scss">
.system-privilege-btn{
	margin-bottom: 10px;
}
.privilege-input{
	width: 300px;
}
</style>
